// 创建一个路由器，并暴露出去

import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import About from '../pages/About.vue'
import NewDetail from '../pages/NewDetail.vue'

// 创建路由器
const router = createRouter({
	/*
		路由器的两种工作模式：
		1. history模式： createWebHistory()
			优点：URL美观，不会带#，接近传统网站额url
			缺点：需要后端配合处理路径问题，否则刷新会有404错误
		2. hash模式： createWebHashHistory()
			优点：兼容性好，不需要服务端处理路径
			缺点：URL带有#不美观，且SEO优化方面差
	*/
	history:createWebHistory(), // 路由器的工作模式
	routes:[ // 配置路由器的规则
		{
			name:'/zhuye',
			path:'/',
			component:Home
		},
		{
			name:'/guanyu',
			path:'/about',
			component:About
		},
		{
			name:'/xinwen',
			path:'/news',
			component:News,
			children:[
				{
					name: 'xinwenxiangqing',
					path: 'newDetail/:id/:title/:content?', // 这里使用:变量名 来声明传递的变量，使用?来表示该属性非必填
					component: NewDetail,

					// props: 开启了这个之后，就可以像在普通标签传递props一样传递参数
					// 第一种写法：直接写true
					// props:true 

					// 第二种写法：方法返回，这个可以决定那些传那些不传
					props(route) {
						return route.params
					}

					// 第三种写法：返回一个对象，这个只能返回固定值了
					// props: {id:'1', title:'固定标题', content: '固定内容'}
				}
			]
		}
	]
})
export default router